<template>
	<view class="page page-charge-list">
		<template v-if="list.length">
			<div border-b pb-5 mb-5 v-for="v in list" :key="v.id">
				<div flex items-center pb-1>
					<div min-w-130 text-justify c-gray-5>操作时间：</div>
					<div font-600>{{ v.created_at }}</div>
				</div>
				<div flex items-center pb-1 v-if="v.source == 'charge'">
					<div min-w-130 c-gray-5>金额：</div>
					<div font-600 mr-1>{{ v.money }}</div> 元
				</div>
				<div flex items-center pb-1>
					<div min-w-130 c-gray-5>条数：</div>
					<div font-600 mr-1>{{ signal(v.source)}} {{ v.account }}</div> 条
				</div>
				<div flex items-center pb-1>
					<div min-w-130 text-justify c-gray-5>时效：</div>
					<div>{{v.time_limit ? v.end_at : '不限时'}}</div>
				</div>
				<div flex items-center >
					<div min-w-130 text-justify c-gray-5>备注：</div>
					<div >{{v.remark}}</div>
				</div>
			</div>
		</template>
		<div v-else text-center pt-20 c-gray-4>
			<div class="icon icon-nodata text-8xl"></div>
			<div pt-1>暂无数据</div>
		</div>
	</view>
</template>

<script setup>
	import api from '@/api'
	import { ref } from 'vue'

	const page_no = ref(1) 
	const page_size = ref(100) 
	const loading = ref(false)
	const loadedAll = ref(false)
	const list = ref([])
	getList()
	async function getList() {
		if(loadedAll.value) return
		loading.value = true
		const data = await api.myAccountDetail({
				page_size: page_size.value,
				page_no: page_no.value
			})
		if(data.list.length < page_size.value) {
			loadedAll.value = true
		}
		page_no.value += 1
		list.value = [ ...list.value, ...data.list]
		loading.value = false
	}

	const signal = v => {
		switch(v) {
			case 'consume':
				return '- '
				break;
			case 'charge':
				return '+ '
				break;
		}
	}

	const dataItem = [{
		"id": 1,
		"member_id": 1,
		"account": 100,
		"use_num": 0,
		"money": 1000,
		"source": "charge",
		"time_limit": 1,
		"start_at": "2024-09-01 12:12:12",
		"end_at": "2024-10-29 12:12:12",
		"remark": null,
		"created_at": null,
		"updated_at": null
	}]

</script>

<style lang="scss">
.page-charge-list {
	padding: 30upx;
	box-sizing: border-box;

	.border-b {
		border-bottom: 1px solid #eee;
	}
}
</style>

